import { useEffect } from "react";
import { useModel } from "umi";
import { Space, message } from "antd";
import { useReactive } from "ahooks";
import { Transfer, Button } from "@douyinfe/semi-ui";

const AddSubordinateModal = () => {
    const { graphqlFetch } = useModel("global");
    const { onCloseGlobalModal } = useModel("global.modal");

    const state = useReactive({
        loading: false,
        selectedPersons: [],
        allPersons: [],
    });

    const loadAllMember = async (value) => {
        state.loading = true;
        state.loading = false;
    };

    useEffect(() => {
        loadAllMember();
    }, []);

    const onFinish = async () => {};

    return (
        <Space direction="vertical" size={20} style={{ width: "100%" }}>
            <Transfer
                style={{ width: 568, height: 416 }}
                dataSource={state.allPersons.map((item) => ({ ...item, label: item.omName + "-" + (item.omPosi || ""), value: item.omUuid, key: item.omUuid }))}
                onChange={(values, items) => (state.selectedPersons = items)}
            />
            <div style={{ margin: 20, width: "100%", textAlign: "center" }}>
                <Button disabled={state.selectedPersons.length === 0} onClick={onFinish}>
                    添加
                </Button>
                <Button style={{ marginLeft: 20 }} onClick={onCloseGlobalModal}>
                    取消
                </Button>
            </div>
        </Space>
    );
};

export default AddSubordinateModal;
